<template>
    <component :is="currentComponent" />
</template>

<script>
import BlogList from '@/components/BlogList'
export default {
    components:{
        BlogList,
    },
    name:'BlogChange',
    data(){
        return{
            tableData:[],
            total:0,
            pageNum: 1,
        }
    },
    computed:{
        currentComponent() {
            const componentMap = {
                1: BlogList,
            };
            return componentMap[this.pageNum] || BlogList;
        }
    },
}
</script>

<style scoped>
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.blog-box{
    display: flex; 
    grid-gap: 15px;
    padding: 10px 0; 
    border-bottom: 1px solid #666666;
}
.blog-box:first-child{
    padding-top: 0;
}
.blog-title{
   font-size: 18px; 
   font-weight: bold; 
   margin-bottom: 10px;
   cursor: pointer;
}
.blog-title:hover{
    color: #2a60c9;
}

</style>